package com.example.composemodifiterdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.*
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

/**
 * @auth: njb
 * @date: 2023/1/1 0:20
 * @desc:
 */
class AnimationActivity :ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            animationVisible("hello")
            //animationContent()
        }
    }

    @Composable
    private fun animationVisible(name: String) {
        Box {
            val state = MutableTransitionState(true)
            Button(onClick = { state.targetState = !state.targetState}) {
                Text(text = (if (state.currentState) "hide" else "show"))
            }
            AnimatedVisibility(visibleState = state) {
                Text(
                    text = "Hello $name!", modifier = Modifier
                        .padding(top = 60.dp)
                        .size(100.dp)
                        .background(Color.Gray), textAlign = TextAlign.Center
                )
            }
        }
    }

    @OptIn(ExperimentalAnimationApi::class)
    @Composable
    fun animationContent(){
        Row {
            var count by remember { mutableStateOf(0) }
            Button(onClick = { count++ }) {
                Text("Add")
            }
            AnimatedContent(
                targetState = count,
                transitionSpec = {
                    // Compare the incoming number with the previous number.
                    if (targetState > initialState) {
                        // If the target number is larger, it slides up and fades in
                        // while the initial (smaller) number slides up and fades out.
                        slideInVertically { height -> height } + fadeIn() with
                                slideOutVertically { height -> -height } + fadeOut()
                    } else {
                        // If the target number is smaller, it slides down and fades in
                        // while the initial number slides down and fades out.
                        slideInVertically { height -> -height } + fadeIn() with
                                slideOutVertically { height -> height } + fadeOut()
                    }.using(
                        // Disable clipping since the faded slide-in/out should
                        // be displayed out of bounds.
                        SizeTransform(clip = false)
                    )
                }
            ) { targetCount ->
                Spacer(modifier = Modifier.height(10.dp))
                Box(
                    modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
                        .background(Color.LightGray)
                        .size(200.dp),
                    contentAlignment = Alignment.Center
                ){
                    Spacer(modifier = Modifier.height(10.dp))
                    Text(text = "$targetCount",
                        color = MaterialTheme.colorScheme.secondary,
                        style = MaterialTheme.typography.displayMedium,
                        textAlign = TextAlign.Center)
                }

            }
        }
    }
}